<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>外星时钟</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h1>外星时钟</h1>
        <div>
            <span>当前外星时间: {{ alienTime }}</span>
            <br>
            <span>当前地球时间: {{ earthTime }}</span>
			<br />
			<span style="color: red;"> {{ alarmMessage }}</span>
        </div>
        <hr>
        <div>
            <label for="year">年:</label>
            <input type="number" v-model.number="year" @input="validateInput">
            <label for="month">月:</label>
            <input type="number" v-model.number="month" @input="validateInput">
            <label for="day">日:</label>
            <input type="number" v-model.number="day" @input="validateInput">
            <label for="hour">时:</label>
            <input type="number" v-model.number="hour" @input="validateInput">
            <label for="minute">分:</label>
            <input type="number" v-model.number="minute" @input="validateInput">
            <label for="second">秒:</label>
            <input type="number" v-model.number="second" @input="validateInput">
            <button @click="setTime">设置时间</button>
        </div>
        <hr>
        <div>
            <label for="alarmYear">报警年:</label>
            <input type="number" v-model.number="alarmYear" @input="validateInput">
            <label for="alarmMonth">报警月:</label>
            <input type="number" v-model.number="alarmMonth" @input="validateInput">
            <label for="alarmDay">报警日:</label>
            <input type="number" v-model.number="alarmDay" @input="validateInput">
            <label for="alarmHour">报警时:</label>
            <input type="number" v-model.number="alarmHour" @input="validateInput">
            <label for="alarmMinute">报警分:</label>
            <input type="number" v-model.number="alarmMinute" @input="validateInput">
            <label for="alarmSecond">报警秒:</label>
            <input type="number" v-model.number="alarmSecond" @input="validateInput">
            <button @click="setAlarm">设置报警</button>
        </div>
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                year: 2804,
                month: 18,
                day: 31,
                hour: 2,
                minute: 2,
                second: 88,
                alarmYear: null,
                alarmMonth: null,
                alarmDay: null,
                alarmHour: null,
                alarmMinute: null,
                alarmSecond: null,
				alarmMessage:''
            },
            computed: {
                alienTime() {
					// 报警判断,只有在设置了报警的年月日的情况下才需要判断
					if(this.alarmYear != null && this.alarmMonth != null && this.alarmDay != null) {
						if(this.alarmYear == this.year && this.alarmMonth == this.month && this.alarmDay == this.day) {
							// 如果有设置时分秒的情况下,需要判断时分秒是否符合条件
							console.log(this.alarmHour+','+this.alarmMinute+','+this.alarmSecond);
							if(this.alarmHour == null) {
								this.alarmMessage = "叮铃铃,到了报警时间...(精确到天)";
							}
							if(this.alarmMinute == null && this.hour == this.alarmHour) {
								this.alarmMessage = "叮铃铃,到了报警时间...(精确到小时)";
							}
							if(this.alarmSecond == null && this.minute == this.alarmMinute) {
								this.alarmMessage = "叮铃铃,到了报警时间...(精确到分钟)";
							}
							if(this.second == this.alarmSecond) {
								this.alarmMessage = "叮铃铃,到了报警时间...(精确到秒)";
							}
						}
					}
					let _hour = this.hour < 10 ? '0'+this.hour : this.hour;
					let _minute = this.minute < 10 ? '0'+this.minute : this.minute;
					let _second = this.second < 10 ? '0'+this.second : this.second;
                    return `${this.year}-${this.month}-${this.day} ${_hour}:${_minute}:${_second}`;
                },
                earthTime() {
					// 外星时钟 2804-18-31 2:2:88的时间戳为 2804*224532000+(44+42+48+40+48+44+40+44+42+40+40+42+44+48+42+40+44+31)*291600+2*90*90+2*90+88=629810235268
					// 外星时钟 1 秒钟等于地球的0.5秒
					// 计算外星时钟时间1年等于多少秒,再以此秒计算地球时间的秒
					// 外星时钟时间一天的秒数:36 * 90 * 90 = 291600
					// 外星时钟每年的天数:44+42+48+40+48+44+40+44+42+40+40+42+44+48+42+40+44+38=770ß
					// 外星时钟的18个月相加的秒数: 770 * 291600 = 224532000 也是一年整的秒数
					// 地球时间1970-1-1 12:00:00 = 14400
					// 将当前的外星时钟的秒数减去2804-18-31 2:2:88的时钟
					const monthDays = [44, 42, 48, 40, 48, 44, 40, 44, 42, 40, 40, 42, 44, 48, 42, 40, 44, 38];
					let sumDayNum = 0;
					for(let i = 1;i < this.month;i++) {
						sumDayNum += monthDays[i-1];
					}
					let _currentTimestamp = this.year * 224532000 + sumDayNum * 291600 + this.day * 291600 + this.hour * 90 * 90 + this.minute * 90 + this.second;
					let _currentEarthTimestamp = Math.floor(_currentTimestamp - 629810235268) / 2 + 14400;
					let earthDate = new Date(_currentEarthTimestamp > 0 ? _currentEarthTimestamp*1000 : 0);
					return earthDate.getFullYear()+'-'+(earthDate.getMonth()+1)+'-'+earthDate.getDate()+' '+earthDate.getHours()+':'+earthDate.getMinutes()+':'+earthDate.getSeconds();
                }
            },
            methods: {
                validateInput() {
                    if (this.year < 2804 || this.year > 9999) {
                        alert('无效的年份。请输入有效的年份。');
                        this.year = 2804;
                    }
                    if (this.month < 1 || this.month > 18) {
                        alert('无效的月份。请输入有效的月份。');
                        this.month = 18;
                    }
                    if (this.day < 1 || this.day > this.daysInMonth(this.month)) {
                        alert('无效的日数。请输入有效的日数。');
                        this.day = 31;
                    }
                    if (this.hour < 0 || this.hour > 35) {
                        alert('无效的小时数。请输入有效的小时数。');
                        this.hour = 2;
                    }
                    if (this.minute < 0 || this.minute > 89) {
                        alert('无效的分钟数。请输入有效的分钟数。');
                        this.minute = 2;
                    }
                    if (this.second < 0 || this.second > 89) {
                        alert('无效的秒数。请输入有效的秒数。');
                        this.second = 88;
                    }
                },
                daysInMonth(month) {
                    const days = [44, 42, 48, 40, 48, 44, 40, 44, 42, 40, 40, 42, 44, 48, 42, 40, 44, 38];
                    return days[month - 1];
                },
                setTime() {
                    this.validateInput();
                    this.updateTime();
                },
                updateTime() {
                    setTimeout(() => {
                        this.second++;
                        if (this.second >= 90) {
                            this.second = 0;
                            this.minute++;
                            if (this.minute >= 90) {
                                this.minute = 0;
                                this.hour++;
                                if (this.hour >= 36) {
                                    this.hour = 0;
                                    this.day++;
                                    if (this.day > this.daysInMonth(this.month)) {
                                        this.day = 1;
                                        this.month++;
                                        if (this.month > 18) {
                                            this.month = 1;
                                            this.year++;
                                        }
                                    }
                                }
                            }
                        }
                        this.updateTime();
                    }, 500);
                },
                setAlarm() {
                    this.validateInput();
                    // 实现报警逻辑
					this.alarmMessage = "到了告警时间了";
                }
            },
            mounted() {
                this.updateTime();
            }
        });
    </script>
</body>
</html>
